<template>
  <div>
    <div class="addInvoiceInfo">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">添加开票信息</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text">
              <i style="color:#f60"></i>
            </label>
          </button>
        </div>
      </header>
      <mt-field label="名称" placeholder="填写准确的抬头名称" v-model="invoiceTitle"></mt-field>
      <div class="choose-box">
        <mt-radio v-model="selected" :options="options">
        </mt-radio>
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="2">
            <mt-field label="税号" placeholder="请输入纳税人识别号" v-model="taxpayerCode"></mt-field>
            <mt-field label="单位地址" placeholder="收票单位注册地址" v-model="registerAddress"></mt-field>
            <mt-field label="电话号码" placeholder="输入公司电话号码" v-model="registerTel"></mt-field>
            <mt-field label="开户银行" placeholder="收票单位开户银行" v-model="bankName"></mt-field>
            <mt-field label="银行账号" placeholder="收票单位银行账号" v-model="bankAccount"></mt-field>
          </mt-tab-container-item>
          <mt-tab-container-item id="1">
            <mt-field label="手机" placeholder="请输入手机号" v-model="receiverPhone"></mt-field>
            <mt-field label="邮箱" placeholder="请输入邮箱" v-model="email"></mt-field>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
      <mt-cell title="默认" class="isDefault">
        <mt-switch v-model="isDefault"></mt-switch>
      </mt-cell>
      <button class="add" @click="save">保存</button>
    </div>
  </div>
</template>
<script>
import {
  addEntInvoiceTemp,
  addNormalInvoiceTemp,
  getInvoiceTempInfo,
  updateInvoiceTemp
} from '@/api/shop'
import {
  mapGetters
} from 'vuex'
import { Toast } from 'mint-ui'
export default {
  data() {
    return {
      selected: '2',
      invoiceTitle: '',
      taxpayerCode: '',
      registerAddress: '',
      registerTel: '',
      bankName: '',
      bankAccount: '',
      receiverPhone: '',
      email: '',
      isDefault: false,
      options: [
        {
          label: '单位',
          value: '2'
        },
        {
          label: '个人',
          value: '1'
        }
      ]
    }
  },
  watch: {},
  components: {
  },
  created() {
    this.fetchData()
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {
    fetchData() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 获取购物车信息
      const formData = {
        invoiceTempId: this.$route.query.tempId
      }
      getInvoiceTempInfo(formData).then(res => {
        this.tempList = res.data.invoiceTempList
        this.selected = res.data.invoiceTemp.issueType.toString()
        this.invoiceTitle = res.data.invoiceTemp.invoiceTitle
        this.receiverPhone = res.data.invoiceTemp.receiverPhone
        this.email = res.data.invoiceTemp.email
        if (res.data.invoiceTemp.isDefault === 1) {
          this.isDefault = true
        } else {
          this.isDefault = false
        }
        this.taxpayerCode = res.data.invoiceTemp.taxpayerCode
        this.registerAddress = res.data.invoiceTemp.registerAddress
        this.registerTel = res.data.invoiceTemp.registerTel
        this.bankName = res.data.invoiceTemp.bankName
        this.bankAccount = res.data.invoiceTemp.bankAccount
      })
      if (this.$route.query.tempId) {
        this.options.forEach(item => {
          this.$set(item, 'disabled', true)
        })
      }
    },
    save() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      if (this.isDefault === false) {
        this.isDefault = 0
      } else {
        this.isDefault = 1
      }
      const formData = {
        id: this.$route.query.tempId,
        userId: this.userInfo.id,
        isDefault: this.isDefault,
        invoiceTitle: encodeURI(this.invoiceTitle),
        taxpayerCode: this.taxpayerCode,
        registerAddress: encodeURI(this.registerAddress),
        registerTel: this.registerTel,
        bankName: encodeURI(this.bankName),
        bankAccount: this.bankAccount,
        receiverPhone: this.receiverPhone,
        email: this.email
      }
      const formData1 = {
        userId: this.userInfo.id,
        isDefault: this.isDefault,
        invoiceTitle: encodeURI(this.invoiceTitle),
        taxpayerCode: this.taxpayerCode,
        registerAddress: encodeURI(this.registerAddress),
        registerTel: this.registerTel,
        bankName: encodeURI(this.bankName),
        bankAccount: this.bankAccount
      }
      const formData2 = {
        userId: this.userInfo.id,
        isDefault: this.isDefault,
        invoiceTitle: encodeURI(this.invoiceTitle),
        receiverPhone: this.receiverPhone,
        email: this.email
      }
      if (this.$route.query.tempId) {
        updateInvoiceTemp(formData).then(res => {
          this.$router.push({ path: 'invoiceSetting' })
        }).catch(err => {
          Toast(err.info)
        })
      } else {
        if (this.selected === '2') {
          addEntInvoiceTemp(formData1).then(res => {
            this.$router.push({ path: 'invoiceSetting' })
          }).catch(err => {
            Toast(err.info)
          })
        } else {
          addNormalInvoiceTemp(formData2).then(res => {
            this.$router.push({ path: 'invoiceSetting' })
          }).catch(err => {
            Toast(err.info)
          })
        }
      }
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
.addInvoiceInfo {
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 105px;
  background-color: #FCFCFC;
  header {
    height: 45px;
    background-color: #FFF;
    color: #000;
    border-bottom: 1px solid #ECECEC;
    z-index: 2!important;
  }
  .title {
    height: 35px;
    line-height: 35px;
    background-color: #fff;
    padding: 0 15px;
    position: fixed;
    z-index: 1;
    width: 100%;
  }
  .mint-cell-text {
    font-size: 14px;
  }
  .mint-field-core {
    font-size: 14px;
  }
  .mint-cell-wrapper {
    border-bottom: 1px solid #ECECEC;
  }
  .choose-box {
    .mint-radiolist {
      background-color: #fff;
      margin-top: 10px;
      border-top: 1px solid #ECECEC;
      border-bottom: 1px solid #ECECEC;
    }
    .mint-radiolist-title {
      margin: 0;
    }
    .mint-radiolist .mint-cell {
      display: inline-block;
      .mint-radio-label {
        font-size: 14px;
      }
      .mint-cell-wrapper {
        border-bottom: 0;
      }
    }
  }
  .isDefault {
    margin-top: 10px;
  }
  .add {
    background: #4a90e2;
    height: 44px;
    width: 100%;
    color: #FFF;
    position: fixed;
    bottom: 0;
  }
}
</style>
